import React from "react"
import { MonacoDiffEditor } from "react-monaco-editor"

const MyMonacoEditor = () => {
  // const code1 = `{\"id\":1995669,   \"metric\":\"cpu\",\"tags\":\"\",\"max_step\":1,\"priority\":0,\"func\":\"all(#1)\",\"op\":\"==\",\"right_value\":\"1\",\"note\":\"测试ares-35 +++++ 世文测试 +++\",\"run_begin    \":\"00:00\",\"run_end\":\"23:59\",\"template_id\":2537,\"field_transform\":\"select(use)\",\"description    \":\"测试ares-35 +++世文测试\",\"handle_description    \":\"测试ares-35 +++世文测试 +++\",\"owner\":\"\",\"notify\":\"\",\"stage\":3,\"no_data\":0,\"step\":0,\"status\":0,\"recover_notify\":0,\"silences_time\":1,\"mark_tags\":\"1\",\"AlarmStrategyTeam\":null,\"AlarmStrategyUser\":null,\"Template\":null,\"StrategyTypeAgg\":null\n}`
  const code2 = `{\"id\":199,\"metric\":\"cpu\",\"tags\":\"\",\"max_step\":1,\"priority\":0,\"func\":\"all(#1)\",\"op\":\"==\",\"right_value\":\"1\",\"note\":\"测试ares-35 +++++ 世文测试 +++\",\"run_begin    \":\"00:00\",\"run_end\":\"23:59\",\"template_id\":2537,\"field_transform\":\"select(use)\",\"description    \":\"测试ares-35 +++世文测试\",\"handle_description    \":\"测试ares-35 +++世文测试 +++\",\"owner\":\"\",\"notify\":\"\",\"stage\":3,\"no_data\":0,\"step\":0,\"status\":0,\"recover_notify\":0,\"silences_time\":1,\"mark_tags\":\"1\",\"AlarmStrategyTeam\":null,\"AlarmStrategyUser\":null,\"Template\":null,\"StrategyTypeAgg\":null\n}`
  const code1 =
    '{"id":1995669,"metric":"cpu","tags":"","max_step":1,"priority":0,"func":"all(#1)","op":"==","right_value":"1","note":"测试ares-35 +++++ 世文测试 +++","run_begin":"00:00","run_end":"23:59","template_id":2537,"field_transform":"select(use)","description":"测试ares-35 +++世文测试","handle_description":"测试ares-35 +++世文测试 +++","owner":"","notify":"","stage":3,"no_data":0,"step":0,"status":0,"recover_notify":0,"silences_time":1,"mark_tags":"1","AlarmStrategyTeam":null,"AlarmStrategyUser":null,"Template":null,"StrategyTypeAgg":null}'

  return (
    <MonacoDiffEditor
      theme='vs-dark'
      width='1000'
      height='400'
      language='json'
      original={JSON.stringify(JSON.parse(code1), null, 2)}
      value={JSON.stringify(JSON.parse(code2), null, 2)}
      options={{
        readOnly: true,
      }}
    />
  )
}

export default MyMonacoEditor
